import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom'
// 函数组件
const App = () => {
	const navigate = useNavigate()
  // 使用 hooks
  // 声明一个响应式数据state 修改state唯一的方法是setstate, initialState 是state初始值
  // const [state, setstate] = useState(initialState);
  const [count, setCount] = useState(1);
  const [list, setList] = useState([{ name: '张三', age: '18' }]);
  
  // 使用节点  访问节点 nickname.current
  // const nickname = useRef()
  // const age = useRef()

  const [name, setName] = useState('1231231');
  const [age, setAge] = useState(0);
  // 方法
  const handleSubmit = () => {
    setList([...list, { name: name, age }])
  }
  const getList = async () => {
    axios.get('/api/list').then(resp => {
      console.log(resp.data)
      setList(resp.data.data)
    })
  }
  // 相当于 componentDidMount
  useEffect(() => {
    getList()
  }, [])

  return (
    <div>
      <div>
        {count}
        <button onClick={() => setCount(count + 1)}>+1</button>
      </div>
      <div>
        {
          list.map((v, i) => {
            return <p key={i} onClick={ () => navigate('/detail/' + v.id) }>我的名字{v.name}--年龄{v.age}</p>
          })
        }
      </div>
      <div>
        <input type="text" placeholder='请输入姓名' value={name} onChange={(e) => setName(e.target.value)} />
        <input type="text" placeholder='请输入年龄' value={age} onChange={(e) => setAge(e.target.value)} />
        <button onClick={handleSubmit}>提交</button>
      </div>
    </div>
  );
}

export default App;
